<template>
  <nav-bar>
  <nav-bar-item>
    <div slot="nav-left" class="left">AI FORCE</div>
  </nav-bar-item>
  <nav-bar-item path='/homePage'>
     <div slot="nav-left" class="left"><span class="nav-left-item" :class="{'borderactive':isActive==1}" @click="gohome">首页</span></div>
  </nav-bar-item>
  <nav-bar-item path='/algorithm'>
    <div slot="nav-left" class="left"><span class="nav-left-item" :class="{'borderactive':isActive==2}" @click="goalgo">算法广场</span></div>
  </nav-bar-item>
    <nav-bar-item path="/demand">
    <div slot="nav-left" class="left"><span class="nav-left-item" :class="{'borderactive':isActive==3}" @click="godemand">需求广场</span></div>
  </nav-bar-item>
  <nav-bar-item class="nav-bar-item" path='/register' v-if="!mytoken">
     <div slot="nav-right" class="right"><Button type="primary" size="large" class="nav-btn">注册</Button></div>
  </nav-bar-item>
  <nav-bar-item class="nav-bar-item" path='login' v-if="!mytoken">
<div slot="nav-right" class="right"><Button type="primary" size="large">登录</Button></div>
    </nav-bar-item>
    <is-login v-if="mytoken"  @newdemand='toadd' @quit='bequit'></is-login>
    <new-demand v-if="add"  @close='declose'/>
</nav-bar>
</template>

<script>
import NavBar from '../../common/navbar/NavBar.vue'
import NavBarItem from '../../common/navbar/NavBarItem.vue'
import NewDemand from '../demand/NewDemand.vue'
import IsLogin from '../islogin/IsLogin.vue'

export default {
  name:'MainNavBar',
  data(){
    return {
       mytoken:'',
       add:false,
       info:false,
       isActive:''
    }
  },
  components:{
   NavBar,
   NavBarItem,
   IsLogin,
   NewDemand
  },
  created(){
    this.mytoken=sessionStorage.getItem('mytoken');
  },
  methods:{
    toadd(value){
      this.add=value;
    },
    declose(value){
      this.add=value;
    },
    bequit(){
      this.mytoken='';
    },
    gohome(){
      this.isActive=1;
    },
    goalgo(){
      this.isActive=2;
    },
    godemand(){
      this.isActive=3;
    }
  }
}
</script>

<style>
.left,
.right{
  height: 4.25rem;
  line-height: 4.25rem;
  font-size: 18px;
  text-align: center;
  color: #fff;
  
}
.left{
  float: left;
  margin-left: 2.5rem;
}
.nav-left-item{
  cursor: pointer;
  padding: 2px;
}
.nav-left-item:hover,
.borderactive{
  border-bottom: 2px solid rgb(140,48,245);
}

.right{
  float: right;
  width: 75px;
  height: 30px;
}
.right .ivu-btn-large{
  font-size: 18px;
  width: 80px;
  height: 32px;
  line-height: 20px;
  padding: 5px 25px 5px 25px;
  border-radius: 5px;
}
.right .ivu-btn-primary{
  text-align: center;
  color: #9A49F6;
  background-color: #fff;
  border-color:#9A49F6;
}
.right .ivu-btn-primary:hover{
  background-color: #fff;
  color: #9A49F6;
}
.nav-btn{
  margin-left: .625rem;
}
</style>